<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-row type="flex" justify="middle">
        <el-col :span="16">
          <el-button type="primary" @click="handleAdd" size="medium" style="margin-bottom: 10px">记账</el-button>
          <el-select v-model="selectBudgetStatusValue" placeholder="请选择">
            <el-option
              v-for="item in optionsSelect1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>

          </el-select>
          <el-input
            placeholder="请输入存储详情关键词"
            v-model="moneyDetail"
            style="width: 200px;margin-left: 10px"
            clearable>
          </el-input>
          <el-button @click="getBudgetList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
        </el-col>
        <el-col style="text-align: center" :span="8">
          <div class="left_text">
            <span>社团资金：{{ totalBudget }} 元</span>
            <el-divider direction="vertical"></el-divider>
            <span>共有支出：{{ expenditureCount }} 笔</span>
            <el-divider direction="vertical"></el-divider>
            <span>共有收入：{{ incomeCount }} 笔</span>
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="page.records"
        border
        highlight-current-row
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id">
        </el-table-column>
        <el-table-column
          label="存取类型"
          prop="moneyStatus">
          <template slot-scope="scope">
            <div class="name-wrapper">
              <el-tag type="success" size="medium" v-if="scope.row.money_status==1">收入</el-tag>
              <el-tag type="danger" size="medium" v-if="scope.row.money_status==2">支出</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="存取金额"
          prop="money">
        </el-table-column>
        <el-table-column
          label="存取时间"
          prop="update_time">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <!--/*            <span style="margin-left: 10px">{{ scope.row.update_time}}</span>*/-->
            <span style="margin-left: 10px">{{ getDateTime(scope.row.update_time) }}</span>

          </template>
        </el-table-column>
        <el-table-column
          label="存取详情"
          prop="money_detail">
        </el-table-column>
        <el-table-column
          label="存取人"
          prop="userName">
        </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="150px"
                >
                  <template slot-scope="scope">
        <!--            <el-button-->
        <!--              type="primary"-->
        <!--              size="mini"-->
        <!--              @click="handleEdit(scope.$index, scope.row)">编辑-->
        <!--            </el-button>-->
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                  </template>
                </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changeAdminList"
        :page-count="page.pages"
      >
      </el-pagination>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="formData" :rules="rules" ref="formData" class="demo-formData">
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="formData.moneyStatus" placeholder="请选择类型">
            <el-option
              v-for="item in optionsSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额" :label-width="formLabelWidth" prop="money">
          <el-input v-model="formData.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="详情" :label-width="formLabelWidth" prop="moneyDetail">
          <el-input v-model="formData.moneyDetail" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getPageStudentList, addStudent, updateStudent, deleteStudent} from "@/api/student.js";
import {getDateTime1} from "../../../utils/dateTimeUtil";
import {addBudget, deleteBudget, getBudgetTotal, getPageBudgetList} from "../../../api/budget";
import {getCreator} from "../../../api/student";

export default {
  name: "BudgetList",
  data() {
    return {
      selectBudgetStatusValue:0,
      clubId: null,
      totalBudget: 0,
      incomeCount: 0,
      expenditureCount: 0,
      moneyDetail: null,
      dateSearch: {},
      // moneyStatus: 0,
      page: {
        total: 100,
        current: 1,
        records: [],
        pages: 10,
      },
      budgetList: [],
      //添加/修改对话框
      title: '',
      dialogFormVisible: false,
      condition: '',
      // 表单参数
      formData: {},
      formLabelWidth: '120px',
      optionsSelect: [{
        value: 1,
        label: '收入'
      }, {
        value: 2,
        label: '支出'
      },],
      optionsSelect1: [{
        value: 0,
        label: '全部'
      },{
        value: 1,
        label: '收入'
      }, {
        value: 2,
        label: '支出'
      },],
      rules: {
        // id: [
        //   {required: true, message: '请输入编号', trigger: 'blur'}
        // ],
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        association: [
          {required: true, message: '请输入选择所属组织', trigger: 'blur'},
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    }
  },

  components: {},
  created() {
    this.clubId = this.$route.params.clubId;
    this.getBudgetList();
  },
  computed: {},
  methods: {
    getBudgetList() {
      this.dateSearch.beginTime = this.beginTime
      this.dateSearch.endTime = this.endTime
      getPageBudgetList
      ({
        dateSearch: this.dateSearch,
        moneyStatus: this.selectBudgetStatusValue,
        clubId: this.clubId,
        currentPage: this.page.current,
        moneyDetail:this.moneyDetail
      }).then(res => {
        this.page = res.data;
        console.log(this.page)
        this.getTotal();
      })
    },
    getTotal() {
      getBudgetTotal({
        clubId: this.clubId
      }).then(res => {
        this.totalBudget = res.data.totalBudget
        this.incomeCount = res.data.incomeCount
        this.expenditureCount = res.data.expenditureCount
      })
    },
    changeAdminList(val) {
      console.log(val)
      this.page.current = val;
      this.getBudgetList();
      this.getTotal();

    },

    getDateTime(val) {
      return getDateTime1(val);
    },
    // 取消按钮
    cancel() {
      this.dialogFormVisible = false;
      this.reset();
    },
    reset(){
      this.formData= {};
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.dialogFormVisible = true;
      this.condition = "add";
    },
    /** 修改按钮操作 */
    handleEdit(index, row) {
      this.reset();
      this.condition = "update";
      console.log("修改按钮取item id: " + row.id);
      this.formData = row;
      this.dialogFormVisible = true;
      this.title = "修改管理员";
    },
    /** 提交按钮 */
    submitForm(formName) {
      this.formData.createTime = "";
      this.formData.updateTime = "";
      this.formData.clubId = this.clubId;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.condition === "update") {
            console.log("是否存在时间：", this.formData);
            updateStudent(this.formData).then(response => {
              this.$message({
                type: 'success',
                message: '修改成功'
              });
              this.dialogFormVisible = false;
              this.getBudgetList();
              this.getTotal();

            });
          } else if (this.condition === "add") {
            addBudget(this.formData).then(response => {
              this.$message({
                type: 'success',
                message: '新增成功'
              });
              this.dialogFormVisible = false;
              this.getBudgetList();
              this.getTotal();
            });
          } else {
            this.$message({
              type: 'error',
              message: '操作失败'
            });
            this.dialogFormVisible = false;
            this.getBudgetList();
            this.getTotal();

          }
        }
      });
    },
    handleDelete(index, row) {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.createTime = "";
        row.updateTime = "";
        deleteBudget(row).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getBudgetList();
            this.getTotal();

          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSuccess() {
      this.$message({
        type: 'success',
        message: '新增成功'
      });
      this.getBudgetList();
      this.getTotal();

    }

  },
}
</script>
<style scoped>
.table_container {
  padding: 20px;
}

.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

.left_text {
  margin-top: 20px;
  font-size: 12px;
}

/*头部*/
/*.el-row {*/
/*  margin-bottom: 20px;*/
/*&:last-child {*/
/*   margin-bottom: 0;*/
/* }*/
/*}*/
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

